<template>

<div class="selectBusiness" >
     <!-- 列表 -->
      <a-table
        style="min-height:200px;"
        rowKey="id" 
        :columns="columns"
        :components="components"
        :data-source="data"
        :row-selection="rowSelection"
        :scroll="{ x: 500, y: 600 }"
        bordered
        :pagination="false"
      >
    </a-table>
</div>
</template>

<script>
import {components} from  "@/utils/antTableComponents";
import {DefineFieldList} from "@/api/crm/set";




export default {
    name:"selectBusiness",
    props:{
        value:{
            type: Array,
            default: ()=>[]
        },
        disableKeys:{
            type: Array,
            default: ()=>[]
        },
        data:{
            type: Array,
            default: ()=>[]
        }
    },
    data(){
   //商机 列表 字段
    const columns = [
      {
        title: "客户名称",
        dataIndex: "crmName",
        key: "crmName",
        width: 120,
      },
      {
        title: "商机名称",
        dataIndex: "title",
        key: "businessTitle",
        width: 120
      },
      {
        title: "商机编号",
        dataIndex: "projectNo",
        key: "projectNo",
        width: 120
      },
      {
        title: "销售阶段",
        dataIndex: "saleStage",
        key: "saleStage",
        width: 120
      },
      {
        title: "预计收入(元)",
        dataIndex: "anticipatedRevenue",
        key: "anticipatedRevenue",
        width: 120
      },
    ];
     //表格 头部 可伸缩
    this.components = components(columns);
      return{
        columns,
        selectedRowKeys: []           //选择的项
      }
    },
    computed:{
        rowSelection() {
          const {disableKeys} = this;
          console.log("SelectSet_disableKeys",disableKeys);
            return {
                selectedRowKeys:this.selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                  // this.selectedRowKeys = selectedRowKeys;
                  this.$emit("input", selectedRows);
                  console.log(`selectedRowKeys: `,selectedRowKeys, 'selectedRows: ', selectedRows);
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: disableKeys.includes(record.key) , // Column configuration not to be checked
                        // name: record.name,
                        // indeterminate: disableKeys.includes(record.key)
                    },
                }),
            };
        },
    },
    methods:{
        
    },
    watch:{
      value:function(n,o){
        console.log("选择商机_value_发生变化",n,o);
         this.selectedRowKeys = n.map((item)=>item.id);
      }
    }
}
</script>

<style lang="less">
 .selectBusiness{
    .ant-table-scroll > .ant-table-body{
        height: 100%;
    }
    .form-group{
      width: 100%;
    }
    td .form-group{
      margin: 0;
    }
    .test{
        border:1px solid #ccc;
    }
    .drag-item{
        width: 200px;
        height: 50px;
        line-height: 50px;
        margin: auto;
        position: relative;
        background: #ddd;
        margin-top:20px;
    }
    .ghostClass{
        opacity: 1;
    }
    .bottom{
        width: 200px;
        height: 50px;
        position: relative;
        background: blue;
        top:2px;
        left: 2px;
        transition: all .5s linear;
    }

    // .ant-table-selection-column  .ant-checkbox-disabled  .ant-checkbox-inner{
    //   border-color: red !important;
    // }
 }
 
 
 
</style>